<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>线下支付</title>
<meta name="viewport" id="viewport"
	content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<link href="./css/offlinePurchase.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="<%=basePath%>css/xadmin.css">
<link href="./css/indent-details.css" rel="stylesheet" type="text/css">
<script src="<%=basePath%>lib/layui/layui.js" charset="utf-8"></script>
<style>
	body{
		background: #FFF !important;
	}
</style>
</head>
<body>
	<div style="padding: 4.25rem 20px;">
		<a href="javascript:history.back()" class="jd-qrdd-topbox">线下支付</a>
		<!--商品部分-->
        <div class="zjzz-buylist-goods1" style="border: 1px solid #eee">
            <div class="zjzz-buylist-gtime">
                <span class="zjzz-buylist-gtime1"><i class="indent-details-img2"></i>天祥瑞官方旗舰店</span>
                <!-- <span class="zjzz-buylist-gtime2">联系客服</span> -->
            </div>
         
        </div>
        <!--商品金额部分-->
        <div class="indent-details-box2" style="border: 1px solid #eee">
            <span class="indent-details-text4">应付总额</span>
            <span id="Total" class="indent-details-text5" style="color: red;"></span>
        </div>
        <div class="indent-details-box2" style="border: 1px solid #eee; margin-bottom: 10px;">
            <span class="indent-details-text4 tcolor-grey">商品总价</span>
            <span id="Total2" class="indent-details-text5 tcolor-black">￥0.00</span>
        </div>
		<p class="titleImfo">请留下您的联系方式，我们工作人员会第一时间联系您。</p>
		<div class="inputName">
			<input id="cname" maxlength=10 type="text" placeholder="请填写您的姓名">
		</div>
		<div class="inputName">
			<input id="cphone" type="text" placeholder="请填写您的联系方式，方便我们随时联系到您">
		</div>
		<p style="color: #ff2d33; margin: 10px 0;">您也可以向下面的账户付款，我们收到款项后会第一时间为您发货。</p>
		<div class="UserImo">
			<p>开户账户：<span id="bankAccount"></span></p>
			<p>开户银行：<span id="openBankName"></span></p>
			<p>开户姓名：<span id="bankName"></span></p>
			<p>开户行地址：<span id="bankAddress"></span></p>
			<div class="layui-upload" style="margin-top: 10px;">
				<button type="button" class="layui-btn" id="test1">上传图片</button>
				<div class="layui-upload-list">
					<img class="layui-upload-img" id="demo1" width=500><input
						id="fileupload" class="fileupload" type="hidden" value="">
					<p id="demoText"></p>
				</div>
			</div>
		</div>
		<input type="button" class="layui-btn" onclick="pay()" value="提交">
		
		<input type=hidden id="cid" value="<%=request.getParameter("cid")%>" />
	</div>
	<script type="text/javascript">
	
		var pid=$("#cid").val();
		$.post("../../../tszs/txr/confirmationOfOrder.do?pid="+pid,function(data){
			var html="";
			$("#Total").html("￥"+data.data[0].Total);
			$("#Total2").html("￥"+data.data[0].Total);
			for (var i = 0; i < data.data[0].datas.length; i++) {
				html+="<div class=\"zjzz-buylist-det\">"+
	            "<img src='/file/"+data.data[0].datas[i].begin+"'>"+
	            "<div class=\"zjzz-buylist-gdetail\">"+
	               "<span class=\"zjzz-buylist-gtit1\">"+data.data[0].datas[i].end+"<br>"+data.data[0].datas[i].tradeno+"</span>"+
	               " <span class=\"zjzz-buylist-gmoney\">"+	 
	                    "<i class=\"zjzz-buylist-gm1\">￥"+data.data[0].datas[i].uName+"</i>"+
	                    "<i class=\"zjzz-buylist-gm2\">x"+data.data[0].datas[i].productNum+"</i>"+
	                "</span>"+
	            "</div>"+
	        "</div>";
			}
	    	$(".zjzz-buylist-goods1").append(html);
		},"json")
	
	
		
		$.post("/tszs/system/loadBankInfo.do",function(res){
			
			$("#bankAccount").text(res.data.bankAccount);
			$("#openBankName").text(res.data.openBankName);
			$("#bankName").text(res.data.bankName);
			$("#bankAddress").text(res.data.bankAddress);
		},"json")
	
		function pay() {
			var fileupload = $("#fileupload").val();
			var cphone = $("#cphone").val();
			var cname = $("#cname").val();
			if(cname == "") {
				layer.msg("姓名不能为空！");
				return;
			}
			if (!(/^1[34578]\d{9}$/.test(cphone))) {
				layer.msg("请输入11位数有效手机号！");
				return false;
			}
			$.post("../../../tszs/txr/offlinePurchase.do?cphone=" + cphone
					+ "&cname=" + cname + "&cid=" + pid + "&photo=" + fileupload,
					function(data) {
						layer.alert("留言成功！", {
							title : "提示信息"
						});
					}, "json")
		}
		layui
				.use(
						'upload',
						function() {
							var $ = layui.jquery, upload = layui.upload;

							//普通图片上传
							var uploadInst = upload
									.render({
										elem : '#test1',
										url : '../../../tszs/txr/UploadServlet.do',
										before : function(obj) {
											//预读本地文件示例，不支持ie8
											obj
													.preview(function(index,
															file, result) {
														$('#demo1').attr('src',
																result); //图片链接（base64）
													});
										},
										done : function(res) {
											console.log(res);
											if (res.type == 1) { //上传成功
												var demoText = $('#demoText');
												demoText
														.html('<span style="color: #FF5722;">上传成功</span>');
												$("#fileupload").val(
														res.data.data.src);
											}
											//上传成功
										},
										error : function() {
											//演示失败状态，并实现重传
											var demoText = $('#demoText');
											demoText
													.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
											demoText.find('.demo-reload').on(
													'click', function() {
														uploadInst.upload();
													});
										}
									});
						});
	</script>
</body>
</html>